import './index.css';
import { useNavigate } from 'react-router-dom';
const Index = (props) => {
    const navigator = useNavigate()
    const toggle=(id)=>{         
        navigator(`/detail/${id}`)
    }
    return (
        <div>
            {props.data.map(item => {
                return (
                    <div className='item' key={item._id} onClick={()=>toggle(item._id)}>
                        <div><img src={item.pic} alt="" /> </div>
                        <div>
                            <p>{item.title}</p>
                            <p>观众评分：{item.rating}</p>
                        </div>
                        <div><button>购票</button> </div>
                    </div>
                )
            })}
        </div>
    );
}

export default Index;



